Tutoriales Gratis de Internet: tutoriales blogger
Mostrando las entradas con la etiqueta tutoriales blogger. Mostrar todas las entradas
Mostrando las entradas con la etiqueta tutoriales blogger. Mostrar todas las entradas

Como crear un boton de pago con enlace Paypal en Blogger

crear un boton de pago con enlace Paypal


Como crear un botón de pago con enlace a PayPal bastante sencillo y funcional para las paginas creadas en blogger que venden productos digitales en internet como archivos, libros, música, juegos, aplicaciones, templates, programas, música, etc. Crear un botón de pago Paypal para Blogger en la actualidad es mas sencillo de lo que se imagina.

Cómo colocar un fondo de imagen en tu plantilla Blogger


Cómo colocar un fondo de imagen en tu plantilla de Blogger es importante para destacar tu contenido y resalta tu diseño web, todas las plantillas en blogger utilizan background (fondo) por defecto se utiliza  un fondo de base con colores variados en este tutorial vamos aprender  a como agregar una imagen de fondo a tu plantilla de Blogger, sigue estos pasos:

Recomendación:

  • Recuerda que la imagen de fondo debe ser lo suficientemente grande para cubrir la pantalla sin perder calidad. 
  • También ten en cuenta que una imagen de fondo no debe dificultar la lectura del contenido de tu blog, debe existir armonía con el sitio web.
  • Se puede agregar cualquier tipo de imagen de fondo ya sea formato jpg, png, gif,etc


Código HTML para colocar imagen de fondo en Blogger 

Para agregar una imagen de fondo a tu blog de Blogger utilizando HTML, sigue estos pasos:

1º Subir tu imagen a Blogger en una entrada.

2º Accede al panel de control de tu blog en Blogger.

3º Ve a "Tema" en el menú lateral.

4º Haz clic en "Editar HTML".

5º Busca la etiqueta body{  dentro de este codigo localizar el "background" de fondo principal. Este código html puede variar en diferentes diseños puede encerrar un código mas grande o corto.

Localizado el código se procede a remplazar agregando el siguiente código:

background:#7c7877 url(URLdeIMAGEN);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;

background:#7c7877 url(URLdeIMAGEN); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover;


Reemplaza URLdeIMAGEN con la URL de tu imagen deseada y guarda los cambios.

Explicación del código:

  • background-image: Define la imagen que se usará como fondo.
  • background-repeat: no-repeat; Evita que la imagen se repita.
  • background-attachment: fixed; Mantiene la imagen fija mientras se desplaza la página.
  • background-size: cover: Ajusta la imagen para cubrir todo el fondo.




Con estos pasos, deberías poder personalizar el fondo de tu plantilla de Blogger. ¡Buena suerte!

Crear efecto de Estrella Fugaz en Blogger


Podemos agregar una función de efecto estrella fugaz que se mueve al movimiento de mouse para embellecer nuestro blog, este efecto hace que el blog se vea más atractivo y diferente de otros blogs durante su lectura o vista de imágenes resaltando su contenido. 

Cómo poner fondo Animado en Plantillas Blogger


Los fondos animados para plantillas o diseños en blogger suelen estar en la barra lateral izquierda y derecha del contenido de nuestras entrada o pagina principal. Los fondos animados son útiles para mejorar la apariencia de nuestra pagina en blogger haciendo notar de que tipo de contenido se enfoca nuestro blog. 

Hacer un Fondo animado para blogger es bastante fácil, si quieres hacerlo solo tienes que seguir los dos pasos a continuación.



1º Entrar a Blogger / Temas / Editar HTML  Copiar y pegar el siguiente código CSS a continuación antes de </b:skin> o </style>
CSS
body{background-image:url(URL-IMAGEN-IZQUIERDO),url(URL-IMAGEN-DERECHO)!important;background-repeat:no-repeat!important;background-attachment:fixed!important;background-position:top left,top right!important;background-size:auto auto,auto auto!important}


2º Colocar el enlace url de la imagen reemplazando URL-IMAGEN-IZQUIERDO y URL-IMAGEN-DERECHO. Después de eso, haga clic en el botón Guardar tema y vea los resultados en su blog.




Puede utilizar cualquiera de las siguientes url de imágenes prediseñadas y editadas por Tutoriales Gratis de Internet o utilizar su propio diseño.


URL Imagen Anime Izquierdo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ZMSL_tmz8ERzN2FBjrsluBxniAUnpXL2MIOZZhcEQZ316l4aC0p056AyzMt3Zkk1MuFNYqoZO6ov91YR9tgxSJFRPTETFgBVoh0WnTXI883h4MS7ZJ8SVzoSXdJVYEhn-C8lJ0CrbWmVMWNIptS6zLd1msftrqgbQGEJY-UtEy1FSP4hILXZ1IxjgX7W/s842/Anime%20lateral%20izquierdo.png

URL Imagen Anime Derecho
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAcnoqfffoGtHJ8yZcQkgQ9DGdBJZiOXEK6gy8Kbas3stW5I1kDMthjtgev1rH1IuHq2yzHWErn-b9Ch6M2oAX2lz2l7lCu2CGM_Lw9sa9vZvoExsCkCRlfYkFR4Kzxa3hb49La8C7my9V3JmC6ABXACmc6nSHFHNohVbcUSiUmAOY7lkvxN6YzU4iYky/s842/Anime%20lateral%20derecho.png


URL Imagen Game Izquierdo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRSfPF9nsGi63haOevNPvRObBH_hVKqc6n32qcFtRGwn9PWIs4Xa4XLCY-LdPjXhrk6WPZNmX4sXpXNlFmOJGno6uR5982IhE3j5DFvrcktyT4wocKUEHJ_lOWSj1aN2wwZYgFwcTzod5MXEItlqZkyvhntQeR1acIRLfsh8wgZr80Yk_nmiYgBhwthUi8/s842/Ni%C3%B1o%20lateral%20izquierdo.png

URL Imagen Game Derecho
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZCq_GWC4t8-bM599xBgXJB31wFJjTas1Fmb2cIgGPmX3OP82n4OZQOr2jCsyGKqJqybuvkz-ATJrfUXJqJAFAcOIS6h-Nb7XrWx-HR5gaVPMyUsjmbXqRF2rS5igihvLA5FklhJXKHtyvk951DpiIACkFjpW2m0rzCnoGhmouXMZFXnPGfiSIpeaFFqoO/s842/Ni%C3%B1a%20lateral%20derecho.png



URL Imagen Robot Izquierdo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeV5hScZ9jeyqVwfVVr6MkiL37IlarxqWMHJeptZJJqz6akktWsXeuVfW1p5Mu6zryC2FSwUPZWvqY70nLrxwPlhQQBat-apklI-yDZEaQIpM8MWsSO4FiMdIkUo0ouIMHPdQlkAsR-LWw9_vBNuapzSDvtSq7aed8TJ9rN9Y3ymJPaFZvJdO4l2jlyMqp/s842/Robot%20lateral%20izquierdo.png

URL Imagen Robot Derecho
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivH3b-iOBJWIhx1JZIF11nBKP3tI9sfHVSvPTTj0mJWah_W8dXiVsPlXOoY1QwG58OQKuI59Qa8xSK72sqLro7WL3E3Pur6ESkLwwgqB3IGIlq3Dl-NEz2qbuOHY07eTYsNRLs4Z8Lpm5M1dUJRDcOgKLEtk9yQpm7DmAlfRTImmWFM0SwW302Przfvyr3/s842/Robot%20lateral%20derecho.png




Como Implementar un Reproductor de Radio Online para Blogger


Reproductor de Radio online para Blogger generalmente existen paginas internet que distribuyen contenido de música y ondas radiales ya sea strems (En Vivo) o contenido de audio grabado en secuencia de forma gratuita, estas paginas son muy concurridas por los usuarios que navegan en internet, una forma de atrapar ese trafico es crear una pagina radial en vivo, en esta oportunidad vamos aprender a como agregar un reproductor de radio online para nuestro blog en blogger, totalmente personalizado y listo para usar.

Como Cambiar las Entradas que se muestran en Slider principal de Blogger


Generalmente todas las paginas web o plantillas blogger actualizadas viene por defecto con un Slider (imágenes en movimiento o estáticos) en la pagina principal de nuestro blog, cuya función sirve para mostrar las ultimas publicaciones dentro del blog. En esta oportunidad vamos aprender a como cambiar las entradas que se muestran por defecto en el slider principal y cambiarlo para mostrar nuestras entradas por etiquetas, así podemos elegir las entradas que nosotros deseamos mostrar en nuestro slider principal de nuestro blog o sitio web.

Como Implementar Metaetiquetas Compatible con SEO en Blogger


Las metaetiquetas  son una de las optimizaciones que se implementan en las plantillas blogger para que los blogs y artículos que publicamos tengan una identidad clara.  Para que los robots de búsqueda como Google, Bing y otras herramientas de búsqueda busquen más fácilmente nuestro blog y sea más fácil clasificarlo en la página de resultados del motor de búsqueda.

La función de metaetiqueta básicamente consta de varios elementos importantes, entre ellos: 

1º La Meta Descripción

La meta descripción se utiliza para proporcionar una descripción general del contenido de la página de su blog en blogger. El tamaño recomendado no debe superar los 200 caracteres. Y tratar de que esta descripción pueda ser breve. Generalmente las metaetiquetas implementadas en algunas plantillas blogger viene por defecto 'data:blog.metaDescription' esta meta descripción asume automáticamente la descripción que escribimos en la configuración de nuestro blog.

<meta content='DESCRIPCION-DEL-BLOG' name='description'/>
2º Las Meta etiquetas 

Las meta etiquetas son palabras clave dentro de blogger, es muy importante porque determina qué palabras clave se utilizan mas dentro del blog como Etiquetas, títulos, descripción, etc (los motores de búsqueda en internet obtienen estas palabras claves y lo categorizan en sectores específicos). 

<meta content='PALABRA CLAVE 1, PALABRA CLAVE 2, PALABRA CLAVE 3,...' name='keywords'/>

3º La Meta etiqueta Robots

El propósito principal de usar la metaetiqueta de robots es determinar qué páginas del blog se indexarán mediante los resultados de búsqueda y qué páginas de blog no se desea indexar. Esta etiqueta es útil, especialmente si un blog usa marcos para la navegación. 

<meta content="index follow" name="robots"/>

* Estos tres componentes de meta etiquetas, cuando se combinan, se ven así: 

<meta content='DESCRIPCION-DEL-BLOG' name='description'/>
<meta content='PALABRA CLAVE 1, PALABRA CLAVE 2, PALABRA CLAVE 3,...' name='keywords'/>
<meta content='index, follow' name='robots'/>

Después de conocer las funciones y algunos conceptos básicos de meta etiquetas que debes implementar en tu plantilla de blogger. Ahora explicare como implementar o modificar las meta etiquetas que se encuentra a menudo en las plantillas que compartimos.



Compartiremos un ejemplo de metaetiquetas SEO para blogger en HTML5 que se utiliza en diferentes diseños de plantillas blogger, este código se puede colocar debajo de la etiqueta de apertura <head> o antes del cierre </head> 

Algunos diseños de plantillas blogger tienen implementado las metaetiquetas, en este caso solo debemos rellenar con nuestros datos o datos de nuestro blog. En otro caso simplemente reemplace la metaetiqueta existente con esta  metaetiquetas HTML5 compatibles con SEO. Estas metaetiquetas pueden tener muchas variantes pero cumplen la misma función. 

<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title> Página no encontrada - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='PALABRAS-CLAVES-DEL-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://www.blogger.com/profile/ID-BLOGGER' rel='publisher'/>
<link href='https://www.blogger.com/profile/ID-BLOGGER' rel='author'/>
<link href='https://www.blogger.com/profile/ID-BLOGGER' rel='me'/>
<meta content='CÓDIGO-VALIDACIÓN-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='CÓDIGO-VALIDACIÓN-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='PAIS' name='geo.placename'/>
<meta content='NOMBRE-ADMINISTRADOR' name='Author'/>
<meta content='general' name='rating'/>
<meta content='ID' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + " Untuk membaca postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='IMAGEN-LOGO-DEL-BLOG' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PERFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/PAGINA-FACEBOOK' property='article:publisher'/>
<meta content='CÓDIGO-APLICACIÓN-FACEBOOK' property='fb:app_id'/>
<meta content='CÓDIGO-ADMINISTRADOR-FACEBOOK' property='fb:admins'/>
<meta content='es_ES' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USUARIO-TWITTER' name='twitter:site'/>
<meta content='USUARIO-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/><link href='//adservice.google.ca' rel='dns-prefetch'/><link href='//adservice.google.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//disqus.com' rel='dns-prefetch'/><link href='//github.com' rel='dns-prefetch'/><link href='//cdn.jsdelivr.net' rel='dns-prefetch'/><link href='//fontawesome.com' rel='dns-prefetch'/><link href='//www.sharethis.com' rel='dns-prefetch'/>

DESCRIPCION INFORMACION
PALABRAS-CLAVES-DEL-BLOG Rellenar con las palabras claves del blog separado por comas ejemplo: blog,blogger,blogero.
USUARIO-BLOGGER Rellenar con ID del perfil de usuario de blogger, ejemplo: https://www.blogger.com/profile/07839937594714189422
CODIGO-VALIDACION-GOOGLE-WEBMASTER Rellenar con el código de validación de Google en Search Console
CODIGO-VALIDACION-BING-WEBMASTER Rellenar con el código de validación de Bing Webmaster (En la actualidad no es necesario solo debemos tener registrado nuestro blog en BING) 
PAIS País de origen donde se publica su blog
NOMBRE-ADMINISTRADOR Rellenar con el nombre del autor del blog
ID Rellenar con el código geografico de país donde se publica su blog, puede encontrarlos en Codigo Paises ejemplo Perú (su código de país seria PE)
IMAGEN-LOGO-DEL-BLOG Rellenar con imagen o enlace url del logo de su blog
PERFIL-FACEBOOK Rellenar con el enlace url del perfil en Facebook
PAGINA-FACEBOOK Rellenar con el enlace de la página de fans en Facebook
CODIGO-APLICACION-FACEBOOK Rellenar con el código de la aplicación de Facebook, puede hacerlo en https://developers.facebook.com
CODIGO-ADMINISTRADOR-FACEBOOK Rellene con el código de perfil de su Facebook
USUARIO-TWITTER Rellenar con tu nombre de usuario en Twitter
*Puede eliminar alguna de las funciones que no desea utilizar en su metaetiquetas de su plantilla blogger.

 


tutoriales blogger

tutoriales youtube

tutoriales facebook